<template>
  <div>
    <div class="bycrq">
      <div
        v-for="(item, index) in title"
        :key="index"
        class="bycrq-item"
        @click="$router.push(`/listxiangqing?id=` + item.id)"
      >
        <img :src="item.pic" alt="" />
        <p class="yincahng" v-html="item.name"></p>
        <p class="yincahng">{{ item.characteristic }}</p>
        <p style="color: red">￥{{ item.minPrice }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "demo",
  // 组件参数 接收来自父组件的数据
  props: ["title"],
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {};
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {},
  //生命周期
  created() {},
  mounted() {},
};
</script> 

<style scoped lang="scss">
.bycrq {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .bycrq-item {
    width: 48%;
    margin: 1%;
    box-sizing: border-box;
    img {
      width: 100%;
      height: 250px;
    }
    p:nth-of-type(2) {
      margin: 10px 0px;
    }
    P {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
